<template>
<div>
    <div class="title">热销推荐</div>
    <ul>
        <router-link 
        tag='li'
        :to="'/detail/'+item.id"
        class="item" v-for="item of list" :key="item.id">
                <img class="item-img" :src="item.imgUrl" alt="">
            <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
              <div class="item-button">查看详情</div>
            </div>

        </router-link>
    </ul>
</div>
</template>
<script>
export default {
    name:'HomeRecommend',
    props:{
      list:Array
    },
    data () {
        return {
          
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
 .title
   line-height: .8rem
   background: #eee;
   text-indent:.2rem
   margin-top:.2rem
 .item
   display flex;
   height:1.9rem;
   overflow hidden
   .item-img
     width:1.7rem;
     height 1.7rem
     padding:.1rem
   .item-info
     flex:1
     padding 0.1rem
     .item-title
       list-style height 0.54rem
       font size 0.32rem

     .item-desc
       line-height .4rem
       color:#ccc;
     .item-button
       line-height:.44rem
       margin-top:.16rem
       background #fff9300;
       padding:0 .1rem
       width:1rem;
       text-align :center;
       border-radius 0.06rem
       color:#fff;
</style>
